import {Fragment} from "react/jsx-runtime";
import {Button, Card, DatePicker, DatePickerProps, Form, Radio, RadioChangeEvent, Select} from "antd";
import {useSnapshot} from "valtio";
import {workbent} from "@/stores/workbenth";
import Chart from "@/components/Chart";
import HeaderSelection from "@/components/HeaderSelection.tsx";
import {useCallback, useEffect} from "react";


const App = () => {
    const store = useSnapshot(workbent);
    const onChange: DatePickerProps["onChange"] = (date, dateString) => {
        console.log(date, dateString);
    };
    const onSearch = useCallback((values: any) => {
        store.filter(values)
    }, [])
    useEffect(() => {
        store.getSearch()
    }, []);
    return (
        <Fragment>
            <div className="w-full h-full p-5">
                <div className="w-full h-20 bg-gray-2 rounded flex *:m-2 justify-center items-center">
                    <HeaderSelection
                        onSearch={onSearch}
                        brandOptions={store.brand}
                        partitionOptions={store.partition}
                        shopOptions={store.shop}
                        sourceOptions={store.source}
                    />
                </div>
                <div className="w-full mt-3 h-60 bg-gray-2 rounded">
                    <div className="p-3 h-2/12 text-gray-9">数据总览</div>
                    <div className="w-full h-10/12 flex justify-center items-center">
                        <Card title="实收金额" className="m-5 w-200px bg-fuchsia">
                            <div className="m-5 text-center text-xl font-bold text-white">
                                {store.resultOptions.PaidInAmount}
                            </div>
                        </Card>
                        <Card title="实付总额" className="m-5 w-200px bg-sky">
                            <div className="m-5 text-center text-xl font-bold text-white">
                                {store.resultOptions.TotalPaid}
                            </div>
                        </Card>
                        <Card title="销售订单数" className="m-5 w-200px bg-amber">
                            <div className="m-5 text-center text-xl font-bold text-white">
                                {store.resultOptions.SalesOrderNumber}
                            </div>
                        </Card>
                        <Card title="人均消费金额" className="m-5 w-200px bg-bluegray">
                            <div className="m-5 text-center text-xl font-bold text-white">
                                {store.resultOptions.PerCapitaConsumptionAmount}
                            </div>
                        </Card>
                        <Card title="新客" className="m-5 w-200px bg-green">
                            <div className="m-5 text-center text-xl font-bold text-white">
                                {store.resultOptions.NewCustomer}
                            </div>
                        </Card>
                        <Card title="老客" className="m-5 w-200px bg-orange">
                            <div className="m-5 text-center text-xl font-bold text-white">
                                {store.resultOptions.patron}
                            </div>
                        </Card>
                    </div>
                </div>
                <div className="w-full mt-3 h-100 bg-gray-2 rounded">
                    <div className="p-3 h-2/12 flex justify-between">
                        <div className="text-gray-9">营业趋势分布图</div>
                    </div>
                    <div className="w-full h-10/12">
                        <div className="w-full h-80">
                            <Chart name="营业趋势分布图" width={'100%'} height={'100%'} options={store.BusinessTrend}/>
                        </div>
                    </div>
                    <div className="w-full h-120 mt-3 flex justify-between">
                        <div className="w-full mr-2 bg-gray-2">
                            <div className="p-5">营收来源占比</div>
                            <Chart name='营收来源占比' width={'100%'} height={'100%'} options={store.RevenueSources}/>
                        </div>
                        <div className="w-full ml-2 bg-gray-2">
                            <div className="p-5">订单来源占比</div>
                            <Chart name='订单来源占比' width={'100%'} height={'100%'} options={store.OrderSources}/>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    );
};

export default App;
